<template>
  <el-container>
    <el-main>
      <el-breadcrumb
        v-show="isSelect ? true : false"
        separator-class="el-icon-arrow-right"
        :articles="articles"
      >
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.selectCategory }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card
        class="box-card"
        v-for="item in articles"
        :key="item.id"
        :articles="item"
        @click.native="ListenerClick(item.id)"
      >
        <router-link :to="{ path: `/blogcontent`, query: { id: item.id } }">
          <img class="img" :src="item.image_address" />
          <div class="title">
            <h1>{{ item.title }}</h1>
          </div>
          <div class="abstract">{{ item.abstract }}</div>
        </router-link>
        <div class="blurb">
          {{ item.category_name }} <i class="el-icon-time"></i>
          {{ item.updated_time }} <i class="el-icon-view"></i>
          {{ item.pageviews }}
        </div>
      </el-card>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-main>
    <el-aside>
      <!-- 个人展示界面 -->
      <el-card class="aside-user box-card">
        <div class="user"></div>
        <img src="../../assets/images/user.gif" class="userimg" />
        <div>{{ this.user.username }}</div>
        <div class="maxim">E-mail:{{ this.user.email }}</div>
        <div class="maxim">{{ this.user.personality }}</div>
      </el-card>
      <el-card class="type">
        <div slot="header" class="clearfix" @click="handleClick">
          <i class="el-icon-s-management"></i>
          文章分类
        </div>
        <div
          class="item"
          v-for="item in category"
          :key="item.id"
          @click="handleSelect(item.category_name)"
        >
          <i class="el-icon-document"></i>
          {{ item.category_name }}
        </div>
      </el-card>
    </el-aside>
  </el-container>
</template>
<script>
export default {
  name: 'BlogLogin',
  data() {
    return {
      articles: [],
      category: [],
      page: 1,
      size: 10,
      total: 0,
      selectCategory: '',
      isSelect: '',
      user: {},
    }
  },
  created() {
    this.getArticles()
    this.getCategory()
    this.handleGetUser()
  },
  methods: {
    getArticles() {
      this.isSelect = false
      this.$http
        .get(`/bloglogin?page=${this.page}&size=${this.size}`)
        .then((res) => {
          //更新数组
          this.articles = res.data.result.data
          //console.log(this.articles)
          //更新总文章数
          this.total = res.data.result.total
        })
    },
    // 获取现有文章分类
    getCategory() {
      this.$http.get(`/bloglogin/nowcategory`).then((res) => {
        //console.log(res)
        this.category = res.data.result.data
      })
    },
    // //传递每页显示的记录数
    // handleSizeChange(s) {
    //   this.size = s
    //   this.getArticles()
    // },
    // 分类查询
    handleSelect(s) {
      this.isSelect = true
      if (this.selectCategory != s) {
        this.selectCategory = s
        this.page = 1
      }
      console.log(this.selectCategory)
      this.$http
        .get(
          `/bloglogin/select?page=${this.page}&size=${this.size}&category_name=${this.selectCategory}`
        )
        .then((res) => {
          console.log(res)

          this.articles = res.data.result.data
          this.total = res.data.result.total
        })
    },

    // 页面改变时
    handleCurrentChange(p) {
      this.page = p
      if (this.isSelect) {
        this.handleSelect(this.selectCategory)
      } else {
        this.getArticles()
      }
    },
    handleClick() {
      this.page = 1
      this.getArticles()
    },

    //监听点击,获取阅读量
    ListenerClick(id) {
      this.$http.get(`/blogcontent?id=${id}`).then((res) => {
        const { pageviews } = res.data.result
        const count = pageviews + 1
        this.$http.put(`/bloglogin`, { id: id, pageviews: count })
      })
    },
    handleGetUser() {
      this.$http.get('/fontuser/1').then((res) => {
        console.log(res)
        this.user = res.data.result
      })
    },
  },
}
</script>

<style lang="stylus">
@import "../../assets/styles/blog.styl"
</style>
